跳到主要内容

使用 Babel打包

配置​

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
# 下面两个如果使用了 实验特性才要装
npm install --save @babel/plugin-proposal-class-properties
npm install --save @babel/plugin-proposal-private-methods

配置文件（babel.config.json）

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-private-methods"
  ]
}

打包

./node_modules/.bin/babel src --out-dir lib

babel 的模块​

webpack，Babel，babel-loader的关系

模块作用
@babel/cliBabel附带了一个内置的CLI，可用于从命令行编译文件。
@babel/core使用本地配置文件
@babel/preset-env编译最新版本JavaScript
@babel/preset-react编译react
@babel/polyfill通过 Polyfill 方式在目标环境中添加缺失的特性
@babel/plugin-proposal-class-properties编译 class

为什么不能单独用 babel​

参考资料 关于webpack，babel，以及es6和commonJS之间的联系

babel 是将es6转换成es5，转换后的代码遵循 COMMONJS 规范，而这个规范，浏览器是不能识别的，直接运行会报错（例如 import这个关键词）

所以 为了将 babel 生成的 commonJS 规范的 es5 写法能够在浏览器上直接运行，就借住了 webpack 这个打包工具来完成，因为 webpack 本身也是遵循 commonJS 这个规范的

//module.exports是commonJS的接口输出规范，es6的规范是export
module.exports = {
    entry: path.join(__dirname, 'index.js'),
    output: {
        path: path.join(__dirname, 'outs'),
        filename: 'index.js'
    },
};